import { globalStyle, style } from '@vanilla-extract/css';
import { vars } from './vars.css';
import SVGChecked from '@mdi/svg/svg/checkbox-outline.svg';
import SVGCheckedMarked from '@mdi/svg/svg/checkbox-marked.svg';
import SVGUnchecked from '@mdi/svg/svg/checkbox-blank-outline.svg';
import SVGIndeterminate from '@mdi/svg/svg/checkbox-intermediate.svg';

export const knnoCheck = style({
	appearance: 'none',
	display: 'inline-block',
	fontSize: '1em',
	width: '1.2em',
	height: '1.2em',
	verticalAlign: 'middle',
	background: vars.color.secondaryText,
	maskImage: "url('data:image/svg+xml;charset=utf8," + SVGUnchecked + "')",
	maskSize: 'cover',
	cursor: 'pointer',
	border: 'none',
	boxSizing: 'border-box',
	margin: '0',
	flexShrink: 0,
	flexGrow: 0,
});

globalStyle(`${knnoCheck}:checked`, {
	backgroundColor: vars.color.accent,
	maskImage: "url('data:image/svg+xml;charset=utf8," + SVGCheckedMarked + "')",
});

globalStyle(`${knnoCheck}:indeterminate`, {
	backgroundColor: vars.color.accent,
	maskImage: "url('data:image/svg+xml;charset=utf8," + SVGIndeterminate + "')",
});

globalStyle(`${knnoCheck}[disabled]`, {
	cursor: 'not-allowed',
	backgroundColor: vars.color.disabledText,
});

globalStyle(`${knnoCheck}.print:checked`, {
	maskImage: "url('data:image/svg+xml;charset=utf8," + SVGChecked + "')",
});
globalStyle(`${knnoCheck}.print`, {
	backgroundColor: vars.color.text,
});
